<template>
	<div class="mkPatient">
		<div style="letter-spacing: 0.2em; display: flex; align-items: center">
			<el-form>
				<MkInput label="" v-model.trim="patientCode" placeholder="录入后回车切换患者" @keyup.enter="searchPatientOutside"
					style="margin: 0 1rem 0 0 !important" />
			</el-form>
			<span v-if="showPatientInfo.name" class="strongText">{{ nameStr }}</span>
			<span v-if="showPatientInfo.name"> /</span>
			<span v-if="showPatientInfo.patientCode">{{ patientCodeStr }}/</span>
			<span v-if="showPatientInfo.abo && showPatientInfo.rhD" class="strongText">{{ bloodTypeStr }}</span>
			<span v-if="showPatientInfo.abo && showPatientInfo.rhD">/</span>
			<span v-if="showPatientInfo.age">{{ ageStr }}/</span>
			<span v-if="showPatientInfo.sex">{{ sexStr }}/</span>
			<span v-if="showPatientInfo.department">{{ departmentStr }}/</span>
			<span v-if="showPatientInfo.berth">{{ berthStr }}/</span>
			<span v-if="showPatientInfo.seeDoctorType">{{ seeDoctorTypeStr }}</span>
		</div>
		<div v-if="editable" class="editBox" @click="edit">
			<el-icon><ele-EditPen /></el-icon>
		</div>
	</div>
	<el-dialog v-model="dialogValue" width="60%" @submit.prevent draggable>
		<template #header>
			<div style="color: #fff">
				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
					<ele-Edit />
				</el-icon>
				<span style="font-size: 15px">修改患者信息</span>
			</div>
		</template>
		<el-form formId="mkPatient" label-width="150px">
			<el-row>
				<MkInput label="住院号/患者Id" v-model.trim="patientCode" placeholder="录入后回车切换患者"
					@keyup.enter="searchPatient" />
			</el-row>
			<el-row>
				<MkInput label="姓名" v-model.trim="editInfo.name" disabled />
				<MkIsEnabled label="显示姓名" v-model="showPatientEdit.name" />
			</el-row>
			<el-row>
				<MkInput label="住院号/患者Id" v-model.trim="editInfo.patientCode" disabled />
				<MkIsEnabled label="显示住院号/患者Id" v-model="showPatientEdit.patientCode" />
			</el-row>
			<el-row>
				<MkInput label="ABO血型" v-model.trim="editInfo.abo" disabled />
				<MkIsEnabled label="显示ABO血型" v-model="showPatientEdit.abo" />
			</el-row>
			<el-row>
				<MkInput label="Rh(D)血型" v-model.trim="editInfo.rhD" disabled />
				<MkIsEnabled label="显示Rh(D)血型" v-model="showPatientEdit.rhD" />
			</el-row>
			<el-row>
				<MkInput label="年龄" v-model.trim="editInfo.age" />
				<MkIsEnabled label="显示年龄" v-model="showPatientEdit.age" />
			</el-row>
			<el-row>
				<MkInput label="性别" v-model.trim="editInfo.sex" type="BasSex" />
				<MkIsEnabled label="显示性别" v-model="showPatientEdit.sex" />
			</el-row>
			<el-row>
				<MkInput label="床号" v-model.trim="editInfo.berth" />
				<MkIsEnabled label="显示床号" v-model="showPatientEdit.berth" />
			</el-row>
			<el-row>
				<MkInput type="SeeDoctorType" label="就诊类型" v-model.trim="editInfo.seeDoctorType" disabled />
				<MkIsEnabled label="显示就诊类型" v-model="showPatientEdit.seeDoctorType" />
			</el-row>
		</el-form>
		<div style="text-align: center; padding-top: 10px">
			<el-button type="primary" style="width: 50%" @click="confirm">确定</el-button>
		</div>
	</el-dialog>
</template>

<script lang="ts" setup>
interface TraApplyBillPatient {
	billNo?: string;
	seeDoctorType?: string;
	patientCode?: string;
	patientId?: string;
	admissionNumber?: string;
	outpatientNumber?: string;
	cardCode?: string;
	name?: string;
	sex?: string;
	age?: string;
	height?: number;
	weight?: number;
	abo?: string;
	rhD?: string;
	birthday?: string;
	apanage?: string;
	berth?: string;
	courtArea?: string;
	diseaseArea?: string;
	department?: string;
	transfuseHistory?: string;
	reactionHistory?: string;
	gestationHistory?: string;
	parturitionHistory?: string;
	transplantMatchHistory?: string;
	basSingleDiseaseCode?: string;
	clinicDiagnose?: string;
	checkBloodAbo?: string;
	checkBloodRh?: string;
	traZyzt?: string;
	visitCount?: number;
	info1?: string;
	info2?: string;
	info3?: string;
	info4?: string;
}
interface TraApplyBillPatientShow {
	billNo?: boolean;
	seeDoctorType?: boolean;
	patientCode?: boolean;
	patientId?: boolean;
	admissionNumber?: boolean;
	outpatientNumber?: boolean;
	cardCode?: boolean;
	name?: boolean;
	sex?: boolean;
	age?: boolean;
	height?: boolean;
	weight?: boolean;
	abo?: boolean;
	rhD?: boolean;
	birthday?: boolean;
	apanage?: boolean;
	berth?: boolean;
	courtArea?: boolean;
	diseaseArea?: boolean;
	department?: boolean;
	transfuseHistory?: boolean;
	reactionHistory?: boolean;
	gestationHistory?: boolean;
	parturitionHistory?: boolean;
	transplantMatchHistory?: boolean;
	basSingleDiseaseCode?: boolean;
	clinicDiagnose?: boolean;
	checkBloodAbo?: boolean;
	checkBloodRh?: boolean;
	traZyzt?: boolean;
	visitCount?: boolean;
	info1?: boolean;
	info2?: boolean;
	info3?: boolean;
	info4?: boolean;
}
/**
 * ! 获取枚举的方法，后续改为pinia的
 */
const getEnumNameAsync = async (enumType: string, enumValue: string): Promise<string> => {
	return enumValue;
};
import { ca } from 'element-plus/es/locale';
import { isNull, deepClone } from '/@/utils';
defineOptions({
	name: 'MkPatient',
});
const props = defineProps({
	modelValue: {
		type: Object as () => TraApplyBillPatient,
		default: () => ({}),
	},
	editable: {
		type: Boolean,
		default: false,
	},
	formName: {
		type: String,
		default: '',
	},
});
const emits = defineEmits(['update:modelValue']);
const patient = useVModel(props, 'modelValue', emits);

const nameStr = ref<string>('---');
const patientCodeStr = ref<string>('----');
const bloodTypeStr = ref<string>('----');
const ageStr = ref<string>('---');
const sexStr = ref<string>('--');
const departmentStr = ref<string>('----');
const berthStr = ref<string>('---');
const seeDoctorTypeStr = ref<string>('---');
watch(
	() => patient,
	async () => {
		if (patient) {
			nameStr.value = patient.value.name && !isNull(patient.value.name) ? patient.value.name : '---';
			patientCodeStr.value = patient.value.patientCode && !isNull(patient.value.patientCode) ? patient.value.patientCode : '----';
			bloodTypeStr.value = (patient.value.abo && !isNull(patient.value.abo) ? patient.value.abo : '--') + (patient.value.rhD && !isNull(patient.value.rhD) ? patient.value.rhD : '--');
			ageStr.value = patient.value.age && !isNull(patient.value.age) ? patient.value.age : '---';
			sexStr.value = patient.value.sex && !isNull(patient.value.sex) ? await getEnumNameAsync('BasSex', patient.value.sex) : '--';
			departmentStr.value = patient.value.department && !isNull(patient.value.department) ? patient.value.department : '--';
			berthStr.value = patient.value.berth && !isNull(patient.value.berth) ? patient.value.berth : '---';
			seeDoctorTypeStr.value = patient.value.seeDoctorType && !isNull(patient.value.seeDoctorType) ? await getEnumNameAsync('SeeDoctorType', patient.value.seeDoctorType) : '---';
		} else {
			nameStr.value = '---';
			patientCodeStr.value = '----';
			bloodTypeStr.value = '---';
			ageStr.value = '---';
			sexStr.value = '---';
			departmentStr.value = '---';
			berthStr.value = '---';
			seeDoctorTypeStr.value = '---';
		}
	},
	{
		deep: true,
		immediate: true,
	}
);

const dialogValue = ref<boolean>(false);
const patientCode = ref<string>();
const editInfo = ref<TraApplyBillPatient>({});
const showPatientInfo = ref<TraApplyBillPatientShow>({
	name: true,
	patientCode: true,
	abo: true,
	rhD: true,
	age: true,
	sex: true,
	berth: true,
	seeDoctorType: true,
});
const showPatientEdit = ref<TraApplyBillPatientShow>({
	name: true,
	patientCode: true,
	abo: true,
	rhD: true,
	age: true,
	sex: true,
	berth: true,
	seeDoctorType: true,
});
const edit = () => {
	patientCode.value = undefined;
	dialogValue.value = true;
	Object.keys(showPatientInfo.value).forEach((key) => {
		showPatientEdit.value[key as keyof TraApplyBillPatientShow] = showPatientInfo.value[key as keyof TraApplyBillPatientShow];
	});
	editInfo.value = deepClone(patient.value);
};
const confirm = () => {
	Object.keys(patient.value).forEach((key) => {
		(patient.value as any)[key] = editInfo.value[key as keyof TraApplyBillPatient];
	});
	Object.keys(showPatientInfo.value).forEach((key) => {
		showPatientInfo.value[key as keyof TraApplyBillPatientShow] = showPatientEdit.value[key as keyof TraApplyBillPatientShow];
	});
	window.localStorage.setItem(props.formName + '显示设置', JSON.stringify(showPatientInfo.value));
	dialogValue.value = false;
};

const searchPatient = async () => {
	try {
		let param = {
			patientCode: patientCode.value,
		};
		let re = await SearchHisPatient(param);

		Object.keys(editInfo.value).forEach((key) => {
			(editInfo.value as any)[key as keyof TraApplyBillPatient] = (re as any)[key as keyof TraApplyBillPatient];
		});
		// console.log('请求患者信息', re, editInfo.value);
	} catch (e) {
		console.log(e);
	}
};
const searchPatientOutside = () => {
	dialogValue.value = true;
	editInfo.value = deepClone(patient.value);
	setTimeout(() => {
		searchPatient();
	}, 500);
};

/**
 * ! 模拟后端接口
 */
const SearchHisPatient = (param: { patientCode: string | undefined }) => {
	return new Promise((resolve) => {
		// 模拟接口响应，这里根据传入的 patientCode 返回一个模拟数据

		let matchedData = mockDataList.find((data) => data.patientCode === param.patientCode);
		if (isNull(matchedData)) {
			matchedData = mockDataList[0];
			matchedData.patientCode = param.patientCode;
		}
		resolve(matchedData);
	});
};
const mockDataList: TraApplyBillPatient[] = [
	{
		patientCode: '2025012311',
		name: '张三',
		sex: '男',
		age: '30',
		height: 175,
		weight: 70,
		abo: 'A',
		rhD: '+',
		birthday: '1993-05-10',
		apanage: '北京',
		berth: '302',
		courtArea: 'A区',
		diseaseArea: '内科',
		department: '心内科',
		transfuseHistory: '无',
		reactionHistory: '无',
		gestationHistory: '无',
		parturitionHistory: '无',
		transplantMatchHistory: '无',
		basSingleDiseaseCode: 'D001',
		clinicDiagnose: '冠心病',
		checkBloodAbo: 'A',
		checkBloodRh: '+',
		seeDoctorType: '住院',
		visitCount: 2,
		info1: '有家族心脏病史',
		info2: '偶尔胸痛',
		info3: '',
		info4: '',
	},
	{
		patientCode: '2025012312',
		name: '李四',
		sex: '女',
		age: '25',
		height: 160,
		weight: 55,
		abo: 'B',
		rhD: '-',
		birthday: '1998-11-20',
		apanage: '上海',
		berth: '405',
		courtArea: 'B区',
		diseaseArea: '外科',
		department: '骨科',
		transfuseHistory: '有',
		reactionHistory: '轻微过敏',
		gestationHistory: '无',
		parturitionHistory: '无',
		transplantMatchHistory: '无',
		basSingleDiseaseCode: 'D002',
		clinicDiagnose: '骨折',
		checkBloodAbo: 'B',
		checkBloodRh: '-',
		seeDoctorType: '住院',
		visitCount: 3,
		info1: '运动受伤',
		info2: '',
		info3: '',
		info4: '',
	},
];
/**
 * ! 页面加载完成后，读取本地存储的显示设置
 */
onMounted(() => {
	const showSetting = window.localStorage.getItem(props.formName + '显示设置');
	if (showSetting) {
		showPatientInfo.value = JSON.parse(showSetting);
	}
});
</script>

<style lang="scss" scoped>
.mkPatient {
	display: flex;
	align-items: center;

	.strongText {
		font-size: 1.5em;
		font-weight: bold;
	}

	.editBox {
		margin-left: 3em;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5em;
		height: 1.5em;
		background-color: var(--el-color-primary);
		color: #fff;
		flex-shrink: 0;
	}
}
</style>
